<template>
	<view class="content_box" >
		<view class="u-flex u-col-center wrapper-box" v-if="!isEmpty">
			<!-- 	<view class="scroll-box" style="background-color: #F6F6F6;">
				<scroll-view class="left u-flex-col u-col-center " enable-flex enable-back-to-top scroll-y>
					<view class="type-list u-ellipsis-1 list-active u-iconfont uicon-arrow-right " v-for="(item, index) in categoryData" :key="index"
						@tap="onType(index)">
						<view class="line line-active"></view>
						<text style="margin-left: 20rpx;"> {{ item.name }}</text>
					</view>
					<view class="hack-tabbar"></view>
				</scroll-view>
			</view> -->
			<scroll-view class="left u-flex-col u-col-center " enable-flex enable-back-to-top scroll-y>
				<view v-for="(item, index) in categoryData" :key="index"
					@tap.stop="jump('/pages/store/storecatepro', { id: item.id })">
					<view class="uni-list">
						<view class="uni-list-cell uni-list-cell-pd">
							<view >{{ item.name }}</view>
							<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;"></text>
						</view>
					</view>
					
					<view class="big-box">
						<view
						class="uni-list-cell2 uni-list-cell-pd2"
						style="flex-direction: row;width: 50vw;"
						v-for="(item2, index2) in item.children"
						:key="index2"
						@tap.stop="jump('/pages/store/storecatepro', { id: item2.id })"
						 >
						   <view class="uni-list-cell-db" style=" flex: 1 1 0%;">
						        {{ item2.name }}
						   </view>
						   </view>
						   
					</view>
				 
				</view>
			</scroll-view>
			<!-- <view>
				<view class="item-list">
					<view class="item-box u-flex">
						<view class="u-flex-col goods-item" @tap="jump('/pages/store/storecatepro', { id: mlist.id })"
							v-for="(mlist, index2) in item.children" :key="index2"
							v-if="mlist.hasContent">
							<image class="item-img" lazy-load :src="mlist.icon" mode="aspectFill"></image>
							<view class="item-title u-ellipsis-1 ">{{ mlist.name }}</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<ljshop-empty v-if="isEmpty" :image="'https://image.hzwltb69.com/app/images/nocate.png'"
			tipText="暂无该分类，还有更多好货等着你噢~">
		</ljshop-empty>
<!-- 		<sh-hot-goods-recom  v-if="isEmpty"></sh-hot-goods-recom> -->
	</view>
</template>

<script>
	import shHotGoodsRecom from '../components/sh-hot-goods-recom.vue';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {shHotGoodsRecom},
		data() {
			return {
				listId: 0,
				categoryData: {},
				storeId: "",
				isEmpty: false,
				id: 0,
			};
		},
		computed: {},
		props: {
			categoryStyleId: {
				type: Number,
				default: 0,
			},

		},
		async created() {
			// console.log('%c当前分类：三级分类', 'color:green;background:yellow');
			// await this.getCategory();
		},
		onLoad(e){

			this.id = e.id


			this.getCategory()
		},
		methods: {
			getCategory() {
				let that = this

				uni.showLoading({

				})
				this.$http('category.storeinfonew', {
					storeId: that.id
				}).then(res => {
					 
					uni.hideLoading()
					if (res) {
						uni.hideLoading()
						 
						let orgList = res.data
					 
						if (orgList.length == 0) {
							this.isEmpty = true
						}
						 
						this.categoryData = orgList;
					}
				});
			},
			onType(id) {
				this.listId = id;
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>

<style lang="scss">
	.uni-list-cell-db{
		text-align: center;
		background: #ddd;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
	}
	.uicon-arrow-right:before {
		content: "\e605";
	}

	// 基本信息
	.info-head {
		.info-title {
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.save-btn {
			color: #fff;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			width: 100rpx;
			border-radius: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}

		.dis-btn {
			opacity: 0.5;
		}
	}

	// 三方
	.other-account {
		.head-title {
			line-height: 82rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.list-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.account-list {
			background-color: #fff;
			height: 100rpx;
			padding: 0 20rpx;

			.info {
				.avatar {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.bind-box {
				.bind-btn {
					padding: 0 20rpx;
					line-height: 60rpx;
					background: #f5f6f8;
					border-radius: 20rpx;
					color: #999;
				}

				.relieve-btn {
					border-radius: 20rpx;
					padding: 0 20rpx;
					line-height: 60rpx;
					background: rgba(#ff0000, 0.05);
					color: #ff0000;
				}
			}
		}
	}

	// 个人信息项
	.user-list {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 40rpx;

		.list-name {
			font-size: 28rpx;

		}

		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}

		.list-val {
			color: #999;
			font-size: 28rpx;
			text-align: right;
		}
	}

	.btn-box {
		margin-top: 200rpx;

		.logout-btn {
			width: 710rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #f54141;
		}

		.hover-logout-btn {
			width: 710rpx;
			height: 80rpx;
			background: #f54141;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.uni-list {
		background-color: #FFFFFF;
		position: relative;
		width: 730rpx;
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		border-bottom: #f1f1f1 1rpx solid;
	}

	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-cell-pd {
		padding: 12px 16px;
	}
	.uni-list-cell2 {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.uni-list-cell-pd2 {
		padding: 12px 16px;
	}

	.uni-switch .uni-switch-wrapper {
		display: -webkit-inline-flex;
		display: -webkit-inline-box;
		display: inline-flex;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
		vertical-align: middle;
	}

	.uni-switch .uni-switch-input {
		-webkit-appearance: none;
		appearance: none;

		width: 52px;
		height: 32px;
		margin-right: 5px;
		border: 1px solid #dfdfdf;
		outline: 0;
		border-radius: 16px;
		box-sizing: border-box;
		background-color: #dfdfdf;
		-webkit-transition: background-color .1s, border .1s;
		transition: background-color .1s, border .1s;
	}
	.big-box{
		display: flex;
		flex-wrap: wrap;
		
	}
</style>